<!--
 * @Description: Description
 * @Author: zhaojiansen
 * @Date: 2022-10-26 14:10:37
 * @LastEditors: zhaojiansen
 * @LastEditTime: 2022-10-27 10:35:08
-->
<template>
  <div class="accountmanagement">
 
    <div class="accountmanagementHeaght" style=" padding-bottom: 20px;
      font-size: 20px;
  font-weight: 900;
    ">账号管理</div>
    <div class="accountmanagementconcent">
      <div
        class="accountmanagementconcentInput"
 
        style="display: flex; align-items: center;padding-bottom: 30px; justify-content: space-between;"
      >
        <div class="input" style="display: flex; align-items: center">
          <el-input
            style="width: 200px;margin-right: 20px;"
            placeholder="请输入内容"
            suffix-icon="el-icon-search"
            v-model="input1"
          >
          </el-input>
          <el-input
            style="width: 200px;margin-right: 20px;"
            placeholder="请输入内容"
            suffix-icon="el-icon-search"
            v-model="input2"
          >
          </el-input>
          <el-select v-model="value" placeholder="请选择"              style="width: 200px;margin-right: 20px;">
            <el-option

              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-select v-model="value" placeholder="请选择"  style="width: 200px;margin-right: 20px;">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="button">
          <el-button  @click="dialogFormVisible = true"  type="primary"
                  style="background-color: #0f40f5"
            >警告按钮</el-button
          >
        </div>
      </div>
      <div class="accountmanagementconcenttable">
        <el-table :data="tableData" align="center" style="width: 100%">
          <el-table-column label="序号" type="index" width="80" align="center">
          </el-table-column>
          <el-table-column align="center" prop="date" label="账号" width="190">
          </el-table-column>
          <el-table-column prop="name" label="角色" align="center" width="190">
          </el-table-column>
          <el-table-column
            prop="province"
            label="备注"
            width="190"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="city"
            label="关联员工"
            align="center"
            width="190"
          >
          </el-table-column>
          <el-table-column
            prop="address"
            label="状态"
            align="center"
            width="190"
          >
          </el-table-column>
          <el-table-column
            prop="zip"
            align="center"
            label="创建时间"
            width="190"
          >
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            width="200"
            align="center"
          >
            <template slot-scope="scope">
              <el-button
                @click="handleClick(scope.row)"
                type="text"
                size="small"
                >修改密码</el-button
              >
              <el-button type="text" size="small">编辑</el-button>
              <el-button type="text" size="small">冻结</el-button>
              <el-button type="text" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
                    <div class="paging">
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  background
                  layout="total,sizes,prev, pager, next"
                  :page-sizes="[5, 10, 20]"
                  :page-size="pageSize"
                  :total="pagetotal"
                >
                </el-pagination>
              </div>
      </div>
    </div>

    <el-dialog title="创建账号" :visible.sync="dialogFormVisible">
      <el-form :model="form" :rules="rules" ref="form">
        <el-form-item label="账号" :label-width="formLabelWidth" prop="name">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" :label-width="formLabelWidth" prop="name">
          <el-input
            v-model="form.name"
            autocomplete="off"
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item label="角色" prop="value" :label-width="formLabelWidth">
          <el-select v-model="form.value" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="关联员工"
          prop="region"
          :label-width="formLabelWidth"
        >
          <el-button type="warning" plain icon="el-icon-plus"
            >文字按钮</el-button
          >
        </el-form-item>
        <el-form-item
          label="备注"
          prop="textarea"
          :label-width="formLabelWidth"
        >
          <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入内容"
            v-model="form.textarea"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="newAccount"
          >确 定</el-button
        >
      </div>
    </el-dialog>



    
<el-dialog title="修改密码" :visible.sync="changepassword">
  <el-form :model="form">
    <el-form-item label="活动名称" :label-width="formLabelWidth">
      <el-input v-model="form.name"  autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="活动名称"    :label-width="formLabelWidth">
      <el-input v-model="form.name"  show-password autocomplete="off"></el-input>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
  </div>
</el-dialog>
  </div>
</template>

<script>
import {
  newAccount,
} from "@/api/accountmanagement/accountmanagement.js";
export default {
  data() {
    return {
      dialogFormVisible: false,
      changepassword:false,
      form: {
        name: "",
        value: "",
        textarea: "",
      },
       pagetotal: 1,
      pageSize: 1,
      pageNum: 1,
      formLabelWidth: "120px",
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],

      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1517 弄",
          zip: 200333,
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1519 弄",
          zip: 200333,
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1516 弄",
          zip: 200333,
        },
      ],
      value: "",
      input1: "",
      input2: "",

      rules: {
        name: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        region: [
          { required: true, message: "请选择活动区域", trigger: "change" },
        ],
        // date1: [
        //   {
        //     type: "date",
        //     required: true,
        //     message: "请选择日期",
        //     trigger: "change",
        //   },
        // ],
        // date2: [
        //   {
        //     type: "date",
        //     required: true,
        //     message: "请选择时间",
        //     trigger: "change",
        //   },
        // ],
        value: [
          {
            type: "array",
            required: true,
            message: "请至少选择一个活动性质",
            trigger: "change",
          },
        ],
        // value: [
        //   { required: true, message: "请选择活动资源", trigger: "change" },
        // ],
        // desc: [{ required: true, message: "请填写活动形式", trigger: "blur" }],
      },
    };
  },
  methods: {
    newAccount(){
        // dialogFormVisible = false
        newAccount()
        .then((res)=>{
            
        })  
    },
    handleClick(row) {
this.changepassword = true;
      console.log(row);
    },
          handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      }
  },
};
</script>

<style>
.accountmanagement {
  background-color: white;
  padding: 20px;


}
  .paging {
        text-align: right;
        margin-top: 20px;
      }
</style>
